<template>
  <div class="ui form">
    <el-button v-if="isReply" type="primary" plain size="mini" @click="cancelReply">取消回复</el-button>
    <br>
    <div class="field">
      <textarea name="content" v-model="content" v-if="isReply" :placeholder="'@'+comment.nickname"></textarea>
      <textarea name="content" v-model="content" v-else placeholder="愿你的见解一针见血..."></textarea>
    </div>
    <div class="fields" style="height: 50px;line-height: 50px;">
      <div class="field my-mobile-wide my-margin-bottom-small">
        <a class="my-avatar">
          <img v-if="avatar===null" src="https://chenyumengblog.oss-cn-hangzhou.aliyuncs.com/img/avatar.png">
          <img v-else :src="avatar">
        </a>
      </div>
      <div class="field my-mobile-wide my-margin-bottom-small" style="width: 250px;">
        <div class="ui left icon input">
          <i class="user icon"></i>
          <el-tooltip content="输入QQ号将自动拉取昵称和头像" placement="top">
            <input type="text" v-model="nickname" @blur="getNickName" name="nickname" placeholder="昵称或QQ号（必须Name*）">
          </el-tooltip>
        </div>
      </div>
      <div class="field my-mobile-wide my-margin-bottom-small" style="width: 250px;">
        <div class="ui left icon input">
          <i class="mail icon"></i>
          <el-tooltip content="你将收到回复通知" placement="top">
            <input v-model="email" type="text" name="email" placeholder="邮箱（必须,将保密Email*）">
          </el-tooltip>
        </div>
      </div>
      <div class="field my-mobile-wide my-margin-bottom-small" style="width: 250px;">
        <div class="ui left icon input">
          <i class="at icon"></i>
          <el-tooltip content="禁止小广告😀" placement="top">
            <input v-model="site" type="text" name="url" placeholder="网站（选填Site）">
          </el-tooltip>
        </div>
      </div>
      <div class="field" style="color: #2185D0;font-size: 15px;font-weight: 600;">
        <el-button type="primary" @click="commentPost" class="ui blue button my-mobile-wide"><i class="edit icon"></i>发布</el-button>
        <el-switch v-model="isNotice"></el-switch>
        回复通知
      </div>
    </div>
  </div>
</template>

<script>
  import axios from "axios";
  import {addComment} from "../api/blog";

  export default {
    name: "CommentPostForm",
    props: {
      isReply: Boolean,
      comment: Object,
      pageNum: Number
    },
    data() {
      return {
        nickname: null,
        site: null,
        content: null,
        avatar: null,
        email: null,
        isNotice: false,
        notice: null
      }
    },
    watch: {
      isNotice: function (val, oldVal) {
        if (val) {
          this.notice = document.location.href
        } else {
          this.notice = null
        }
      }
    },
    methods: {
      getNickName() {
        let regNum = /^[0-9]+.?[0-9]*/; //判断是否是数字。
        if (regNum.test(this.nickname)) {
          // QQ号
          this.$message({
            message: '获取QQ头像和QQ名称中...',
            type: 'warning'
          });
          this.avatar = 'http://q2.qlogo.cn/headimg_dl?dst_uin=' + this.nickname + '&spec=40'
          axios.get('https://api.2heng.xin/qqinfo/?type=getqqnickname', {params:{qq:this.nickname},method:'get'}).then(res=> {
            this.nickname = res.data.split(',')[6].replace(/\"/g, "")
            this.$message({
              message: '获取QQ头像和QQ名称成功！',
              type: 'success'
            });
          })
          this.email = this.nickname+'@qq.com'
        }
      },
      commentPost() {
        let comment;
        let num;
        let regEmail = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
        if (this.content===null||this.content==='') {
          this.$message({
            message: '评论内容不能为空！',
            type: 'error'
          });
          return;
        }
        if (this.nickname===null||this.nickname==='') {
          this.$message({
            message: '昵称不能为空！',
            type: 'error'
          });
          return;
        }
        if (!regEmail.test(this.email)) {
          this.$message({
            message: '邮箱格式有误！',
            type: 'error'
          });
          return
        }
        if (this.isReply) {
          // 回复评论
          comment = {
            nickname: this.nickname,
            email: this.email,
            content: this.content,
            avatar: this.avatar,
            site: this.site,
            notice: this.notice,
            blog: this.$route.params.blogId,
            parentCommentId: this.comment.id
          }
          num = this.pageNum
        } else {
          // 评论
          comment = {
            nickname: this.nickname,
            email: this.email,
            content: this.content,
            avatar: this.avatar,
            site: this.site,
            notice: this.notice,
            blog: this.$route.params.blogId,
          }
          num = 1
        }
        addComment(comment).then(res => {
          if (res.code === 200) {
            this.$message({
              message: '评论成功！',
              type: 'success'
            });
            this.$emit("getList", num)
            this.$emit("cancelReply")
            this.nickname = null
            this.email = null
            this.content = null
            this.avatar = null
            this.site = null
            this.notice = null
          }
        })
      },
      cancelReply() {
        this.$emit("cancelReply")
      }
  }
  }
</script>

<style scoped>

</style>
